<template>
  <table
    cellspacing="0"
    cellpadding="0"
    class="el-date-table"
    @click="handleClick"
    @mousemove="handleMouseMove"
    :class="{ 'is-week-mode': selectionMode === 'week' || selectionMode === 'weeks' }">
    <tbody>
    <tr>
      <th v-if="showWeekNumber">周数</th>
      <th v-for="(week, key) in WEEKS" :key="key">{{ t('el.datepicker.weeks.' + week) }}</th>
    </tr>
    <tr
      class="el-date-table__row"
      v-for="(row, key) in rows"
      :class="{ current: isWeekActive(row[showWeekNumber ? 2 : 1]) }"
      :key="key">
      <td
        v-for="(cell, key) in row"
        :class="getCellClasses(cell)"
        :key="key">
        <div>
          <span>
            {{ cell.text }}
          </span>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script>
  import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, prevDate, nextDate, isDate, clearTime as _clearTime } from 'element-ui/src/utils/date-util'
  import Locale from 'element-ui/src/mixins/locale'
  import { arrayFindIndex, arrayFind, coerceTruthyValueToArray } from 'element-ui/src/utils/util'

  const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
  const getDateTimestamp = function(time) {
    if (typeof time === 'number' || typeof time === 'string') {
      return _clearTime(new Date(time)).getTime()
    } else if (time instanceof Date) {
      return _clearTime(time).getTime()
    } else {
      return NaN
    }
  }

  // remove the first element that satisfies `pred` from arr
  // return a new array if modification occurs
  // return the original array otherwise
  const removeFromArray = function(arr, pred) {
    const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred)
    return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr
  }

  export default {
    mixins: [Locale],

    props: {
      firstDayOfWeek: {
        default: 7,
        type: Number,
        validator: val => val >= 1 && val <= 7
      },

      value: {},

      defaultValue: {
        validator(val) {
          // either: null, valid Date object, Array of valid Date objects
          return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate))
        }
      },

      date: {},

      selectionMode: {
        default: 'day'
      },

      showWeekNumber: {
        type: Boolean,
        default: false
      },

      disabledDate: {},

      cellClassName: {},

      minDate: {},

      maxDate: {},

      rangeState: {
        default() {
          return {
            endDate: null,
            selecting: false
          }
        }
      }
    },

    computed: {
      offsetDay() {
        const week = this.firstDayOfWeek
        // 周日为界限，左右偏移的天数，3217654 例如周一就是 -1，目的是调整前两行日期的位置
        return week > 3 ? 7 - week : -week
      },

      WEEKS() {
        const week = this.firstDayOfWeek
        return WEEKS.concat(WEEKS).slice(week, week + 7)
      },

      year() {
        return this.date.getFullYear()
      },

      month() {
        return this.date.getMonth()
      },

      startDate() {
        return getStartDateOfMonth(this.year, this.month)
      },

      rows() {
        // TODO: refactory rows / getCellClasses
        const date = new Date(this.year, this.month, 1)
        let day = getFirstDayOfMonth(date) // day of first day
        const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth())
        const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1))

        day = (day === 0 ? 7 : day)

        const offset = this.offsetDay
        const rows = this.tableRows
        let count = 1

        const startDate = this.startDate
        const disabledDate = this.disabledDate
        const cellClassName = this.cellClassName
        const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : []
        const now = getDateTimestamp(new Date())

        for (let i = 0; i < 6; i++) {
          const row = rows[i]

          if (this.showWeekNumber) {
            // if (!row[0]) {
            row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) }
            // }
          }

          for (let j = 0; j < 7; j++) {
            let cell = row[this.showWeekNumber ? j + 1 : j]
            if (!cell) {
              cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false }
            }

            cell.type = 'normal'

            const index = i * 7 + j
            const time = nextDate(startDate, index - offset).getTime()
            cell.inRange = time >= getDateTimestamp(this.minDate) && time <= getDateTimestamp(this.maxDate)
            cell.start = this.minDate && time === getDateTimestamp(this.minDate)
            cell.end = this.maxDate && time === getDateTimestamp(this.maxDate)
            const isToday = time === now

            if (isToday) {
              cell.type = 'today'
            }

            if (i >= 0 && i <= 1) {
              const numberOfDaysFromPreviousMonth = day + offset < 0 ? 7 + day + offset : day + offset

              if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
                cell.text = count++
              } else {
                cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7
                cell.type = 'prev-month'
              }
            } else {
              if (count <= dateCountOfMonth) {
                cell.text = count++
              } else {
                cell.text = count++ - dateCountOfMonth
                cell.type = 'next-month'
              }
            }

            let cellDate = new Date(time)
            cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate)
            cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime())
            cell.customClass = typeof cellClassName === 'function' && cellClassName(cellDate)
            this.$set(row, this.showWeekNumber ? j + 1 : j, cell)
          }

          if (this.selectionMode === 'week' || this.selectionMode === 'weeks') {
            const start = this.showWeekNumber ? 1 : 0
            const end = this.showWeekNumber ? 7 : 6
            const isWeekActive = this.isWeekActive(row[start + 1])

            row[start].inRange = isWeekActive
            row[start].start = isWeekActive
            row[end].inRange = isWeekActive
            row[end].end = isWeekActive
          }
        }

        return rows
      }
    },

    watch: {
      'rangeState.endDate'(newVal) {
        this.markRange(this.minDate, newVal)
      },

      minDate(newVal, oldVal) {
        if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
          this.markRange(this.minDate, this.maxDate)
        }
      },

      maxDate(newVal, oldVal) {
        if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
          this.markRange(this.minDate, this.maxDate)
        }
      }
    },

    data() {
      return {
        tableRows: [[], [], [], [], [], []],
        lastRow: null,
        lastColumn: null
      }
    },

    methods: {
      cellMatchesDate(cell, date) {
        const value = new Date(date)
        return this.year === value.getFullYear() &&
          this.month === value.getMonth() &&
          Number(cell.text) === value.getDate()
      },

      getCellClasses(cell) {
        const selectionMode = this.selectionMode
        const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : []

        let classes = []
        if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {
          classes.push('available')
          if (cell.type === 'today') {
            classes.push('today')
          }
        } else {
          classes.push(cell.type)
        }

        if (cell.type === 'normal' && defaultValue.some(date => this.cellMatchesDate(cell, date))) {
          classes.push('default')
        }

        if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && this.cellMatchesDate(cell, this.value)) {
          classes.push('current')
        }

        if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || this.selectionMode === 'week' || this.selectionMode === 'weeks')) {
          classes.push('in-range')

          if (cell.start) {
            classes.push('start-date')
          }

          if (cell.end) {
            classes.push('end-date')
          }
        }

        if (cell.disabled) {
          classes.push('disabled')
        }

        if (cell.selected) {
          classes.push('selected')
        }

        if (cell.customClass) {
          classes.push(cell.customClass)
        }

        return classes.join(' ')
      },

      getDateOfCell(row, column) {
        const offsetFromStart = row * 7 + (column + (this.showWeekNumber ? 1 : 0)) - this.offsetDay
        return nextDate(this.startDate, offsetFromStart)
      },

      isWeekActive(cell) {
        if (this.selectionMode !== 'week' && this.selectionMode !== 'weeks') return false
        const newDate = new Date(this.year, this.month, 1)
        const year = newDate.getFullYear()
        const month = newDate.getMonth()

        if (cell.type === 'prev-month') {
          newDate.setMonth(month === 0 ? 11 : month - 1)
          newDate.setFullYear(month === 0 ? year - 1 : year)
        }

        if (cell.type === 'next-month') {
          newDate.setMonth(month === 11 ? 0 : month + 1)
          newDate.setFullYear(month === 11 ? year + 1 : year)
        }

        newDate.setDate(parseInt(cell.text, 10))
        if (isDate(this.value)) {
          const dayOffset = (this.value.getDay() - this.firstDayOfWeek + 7) % 7 - 1
          const weekDate = prevDate(this.value, dayOffset)
          return weekDate.getTime() === newDate.getTime()
        }
        if (Array.isArray(this.value)) {
          return this.value.some((val) => {
            if (isDate(val)) {
              const dayOffset = (val.getDay() - this.firstDayOfWeek + 7) % 7 - 1
              const weekDate = prevDate(val, dayOffset)
              return weekDate.getTime() === newDate.getTime()
            }
          })
        }
        return false
      },

      markRange(minDate, maxDate) {
        minDate = getDateTimestamp(minDate)
        maxDate = getDateTimestamp(maxDate) || minDate;
        [minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)]

        const startDate = this.startDate
        const rows = this.rows
        for (let i = 0, k = rows.length; i < k; i++) {
          const row = rows[i]
          for (let j = 0, l = row.length; j < l; j++) {
            if (this.showWeekNumber && j === 0) continue

            const cell = row[j]
            const index = i * 7 + j + (this.showWeekNumber ? -1 : 0)
            const time = nextDate(startDate, index - this.offsetDay).getTime()

            cell.inRange = minDate && time >= minDate && time <= maxDate
            cell.start = minDate && time === minDate
            cell.end = maxDate && time === maxDate
          }
        }
      },

      handleMouseMove(event) {
        if (!this.rangeState.selecting) return

        let target = event.target
        if (target.tagName === 'SPAN') {
          target = target.parentNode.parentNode
        }
        if (target.tagName === 'DIV') {
          target = target.parentNode
        }
        if (target.tagName !== 'TD') return

        const row = target.parentNode.rowIndex - 1
        const column = target.cellIndex

        // can not select disabled date
        if (this.rows[row][column].disabled) return

        // only update rangeState when mouse moves to a new cell
        // this avoids frequent Date object creation and improves performance
        if (row !== this.lastRow || column !== this.lastColumn) {
          this.lastRow = row
          this.lastColumn = column
          this.$emit('changerange', {
            minDate: this.minDate,
            maxDate: this.maxDate,
            rangeState: {
              selecting: true,
              endDate: this.getDateOfCell(row, column)
            }
          })
        }
      },

      handleClick(event) {
        let target = event.target
        if (target.tagName === 'SPAN') {
          target = target.parentNode.parentNode
        }
        if (target.tagName === 'DIV') {
          target = target.parentNode
        }

        if (target.tagName !== 'TD') return

        const row = target.parentNode.rowIndex - 1
        const column = this.selectionMode === 'week' || this.selectionMode === 'weeks' ? 1 : target.cellIndex
        const cell = this.rows[row][column]

        if (cell.disabled || cell.type === 'week') return

        const newDate = this.getDateOfCell(row, column)

        if (this.selectionMode === 'range') {
          if (!this.rangeState.selecting) {
            this.$emit('pick', { minDate: newDate, maxDate: null })
            this.rangeState.selecting = true
          } else {
            if (newDate >= this.minDate) {
              this.$emit('pick', { minDate: this.minDate, maxDate: newDate })
            } else {
              this.$emit('pick', { minDate: newDate, maxDate: this.minDate })
            }
            this.rangeState.selecting = false
          }
        } else if (this.selectionMode === 'day') {
          this.$emit('pick', newDate)
        } else if (this.selectionMode === 'week') {
          const weekNumber = getWeekNumber(newDate)
          const value = newDate.getFullYear() + 'w' + weekNumber
          this.$emit('pick', {
            year: newDate.getFullYear(),
            week: weekNumber,
            value: value,
            date: newDate
          })
        } else if (this.selectionMode === 'dates') {
          const value = this.value || []
          const newValue = cell.selected
            ? removeFromArray(value, date => date.getTime() === newDate.getTime())
            : [...value, newDate]
          this.$emit('pick', newValue)
        } else if (this.selectionMode === 'weeks') {
          const getWeek = (v) => {
            const weekNumber = getWeekNumber(v)
            return {
              year: v.getFullYear(),
              week: weekNumber,
              value: v.getFullYear() + 'w' + weekNumber,
              date: v
            }
          }
          const value = (this.value || []).map(getWeek)
          const newValue = cell.inRange
            ? removeFromArray(value, date => date.value === getWeek(newDate).value)
            : [...value, getWeek(newDate)]
          this.$emit('pick', newValue)
        }
      }
    }
  }
</script>
